<template>
	<div class="loading-medium" @click="closeGuanbi">
		<div class="sadasImg" v-if="!isShowCloseBot">
			<img src="../../src/assets/img/guanbi.png" alt="">
		</div>
		<div class="dfsf">
			{{msgText}}
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			msgText: String,
			isShowCloseBot: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		created() {},
		mounted() {},
		methods: {
			closeGuanbi() {
				this.$emit('closeGuanbiTow', false)
			},
		}
	}
</script>

<style scoped>
	/* 
    小：.loading-small
    中:.loading-medium
    大：.loading-large
*/
	.loading-medium {
		padding: 10px;
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 99999;
		max-width: 250px;
		min-width: 100px;
		min-height: 40px;
		border-radius: 5px;
		background-color: rgba(77, 77, 77, 1);
		transform: translateX(-50%);
	}

	.loading-medium img {
		width: 30px;
		height: 30px;
		margin-bottom: 3px;
	}

	.sadasImg {
		text-align: center;
	}

	.dfsf {
		word-wrap: break-word;
		text-align: center;
		font-size: 12px;
		color: #fff;
	}

	.loading-medium.loading-small {
		width: 25px;
		height: 25px;
	}

	.loading-medium span {
		position: absolute;
		width: 5px;
		height: 5px;
		background-color: #efefef;
		border-radius: 50%;
		animation: load 1s linear infinite;
	}
</style>